<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-15 12:49:40
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-20 11:40:01
 * @FilePath: \text-online-system2\src\views\DoingTest.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-button class="answerCardBtn" type="primary" style="margin-right: 16px;position: absolute;left: 10rem;top:2rem;" @click="drawer = true">
   点击查看答题情况
  </el-button>
  <!-- 答题卡 -->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" :append-to-body="true">
    <h2>答题卡</h2>
    <div class="card">
      <div v-for="o in 27" :key="o" class="text item">
          <el-badge :is-dot="true" class="dotted">{{ o }}</el-badge>
        </div>
    </div>
  </el-drawer>

  <!-- 试卷 -->
    <div class="paper">
      <div class="paperbox">
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
          <li v-for="item  in questionList" :key="item" class="infinite-list-item">
            <SubjectItem :data="item" @saveRecord="saveRecord"  ></SubjectItem>
          </li>
        </ul>
      </div>
    </div>
  

  <!-- 交卷 退出   -->
  <div class="submitBtn">
    <el-button text @click="dialogVisible1 = true"  style="background-color:#e6a23c;color:#fff">我要提交
  </el-button>
  <el-dialog
    v-model="dialogVisible1"
    title="提示"
    width="30%"
    :before-close="handleClose"
  >
    <span>确认交卷后，此页面不可返回</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">
          OK
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 退出 -->
  <el-button text @click="dialogVisible2 = true"  style="background-color:#f56c6c;color:#fff;margin-left: 1rem;">退出
  </el-button>
  <el-dialog
    v-model="dialogVisible2"
    title="提示"
    width="30%"
    :before-close="handleClose"
  >
    <span>确认退出后，此页面不可返回，下次进入将重新答题</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false;this.$router.back()">
          OK
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>

  <!-- 截止时间 -->
<div class="restTime">
  <p><el-icon style="margin-right:0.8rem"><AlarmClock/></el-icon>剩余时长：</p> <p>{{hours}}:{{points}}:{{seconds}}</p>
</div>




</template>

<script scope>
import SubjectItem from '../components/SubjectItem.vue'
import {mapGetters} from 'vuex'
export default {
  name: "PersonalCenter",
  components: {
    SubjectItem,
  },
  data() {
    return {
      count: '',
      drawer:false,
      dialogVisible1:false,
      dialogVisible2:false,

        hours:0,
      points:0,
      seconds:0,
      questionList:[],
      resultList:[]
    };
  },

  mounted() {
    this.initQuestionList()
    var nowTime = new Date;
    console.log(nowTime);
    this.time()

   },


  methods: {
    initQuestionList(){
      this.question.getAllQuestionByPaperIdnClassPaperId({paperId:this.getCurrentPaperId,classPaperId:this.getCurrentClassPaperId}).then((res)=>{
                 if(res.code == 1){
                      this.questionList = res.data
                 }

      })
    },

    //记录做题信息
    saveRecord(questionId,result,type){

     this.resultList.splice(this.resultList.findIndex((value)=>{
            return value.questionId == questionId
     }))

     this.resultList.push({questionId,result,type})

      console.log(this.resultList)
    }
    ,
    load() {
      this.count = 10
    },

    //到计时
    time(){
      var EndDate1 = (new Date()).getTime() + 1000 * 60 * 120;
      var that = this
      setInterval(function(){
        var date1 = new Date();
        var ms1 = EndDate1 - date1;
      var seconds1 = ms1/1000;
      var points1 = seconds1/60;
      var hours1 = points1/60;
      //计算时，小于10在前加0
      if(Math.floor(hours1%24) < 10){
        that.hours = '0' + Math.floor(hours1%24);
      }else{
        that.hours = Math.floor(hours1%24);
      }

      //计算分，小于10在前加0
      if(Math.floor(points1%60) < 10){
        that.hours = '0' + Math.floor(points1%60);
      }else{
        that.points = Math.floor(points1%60);
      }

      //计算秒，小于10在前加0
      if(Math.floor(seconds1%60) < 10){
        that.hours = '0' + Math.floor(seconds1%60);
      }else{
        that.seconds = Math.floor(seconds1%60);
      }
      },1000)

    }
  },

  computed:{
    ...mapGetters(['getCurrentPaperId','getCurrentClassPaperId'])
  }
};
</script>

<style scoped>
*{
  user-select:none;
}
.paper {
  width: 100%;
  position: fixed;
  /* flex: 1; */
  /* height: 100%; */
  padding: 5rem 5rem 0;
  background-color: #efefef;
  overflow: hidden;
}

.paperbox {
  /* width: 100%; */
  /* height: 1000px; */
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}

.infinite-list {
  height: 40.875rem;
  padding: 1rem;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  margin: 20px;
  border-bottom: 1px solid rgba(114, 113, 113, 0.313);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

/* 答题卡 */
.card{
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.dotted {
  margin-top: 10px;
  /* margin-right: 40px; */
  text-align: center;
  line-height: 2.5rem;
}
.el-badge {
  width: 2.5rem;
  height: 2.5rem;
  color: #ffff;
  font-weight: 600;
  border: 1px solid var(--greenColor3);
  border-radius: 50%;
  margin:1.5rem 1.255rem;
  background-color: var(--greenColor2);
}

/* 打开答题卡的按钮 */
.answerCardBtn{
  z-index: 999;
}

/* 交卷按钮 */

.dialog-footer button:first-child {
  margin-right: 10px;
}
.submitBtn{
  position: absolute;
  left: 20rem;
  top:2rem;
}

/* 剩余时间 */
.restTime{
  display: flex;
  position: absolute;
  right: 12rem;
  top:2rem;
  font-size: 1.25rem;
  color: #f56c6c;
}
</style>
